<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>网上商城系统后台管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="images/style.css" type="text/css" rel="stylesheet">
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: tahoma, 宋体, fantasy;
            font-size: 12px;
            background-color: #f4f4f4;
            color: #333;
        }

        /* 顶部导航栏样式 */
       .top-navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #337abb;
            width: 80%;
            margin: 10px auto;
            padding: 10px 20px;
            border-radius: 5px;
        }

       .system-logo {
            width: 100px;
            height: 50px;
            background: url(images/left_bg.gif) no-repeat center;
            background-size: cover;
        }

       .main-menu {
            list-style: none;
            display: flex;
            gap: 20px;
        }

       .main-menu li {
            position: relative;
        }

       .main-menu a {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 3px;
            transition: background-color 0.3s ease;
        }

       .main-menu a:hover {
            background-color: #265883;
        }

       .sub-menu {
            display: none;
            position: absolute;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            top: 100%;
            left: 0;
            min-width: 150px;
            z-index: 1;
        }

       .sub-menu ul {
            list-style: none;
            padding: 10px;
        }

       .sub-menu li {
            margin-bottom: 5px;
        }

       .sub-menu a {
            color: #333;
            text-decoration: none;
            display: block;
            padding: 5px;
            border-radius: 3px;
            transition: background-color 0.3s ease;
        }

       .sub-menu a:hover {
            background-color: #f0f0f0;
        }

       .main-menu li:hover.sub-menu {
            display: block;
        }

        /* 主体内容布局 */
       .main-content {
            display: grid;
            grid-template-columns: 200px 1fr 10px;
            grid-template-rows: 1fr;
            width: 80%;
            margin: 10px auto;
            gap: 10px;
            height: calc(100vh - 100px);
        }

        /* 左侧栏样式 */
       .left-sidebar {
            grid-column: 1 / 2;
            background: url(images/left_bg.gif);
            border-radius: 5px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

       .left-sidebar-title {
            font-weight: bold;
            font-size: 14px;
            color: white;
            padding-left: 15px;
            margin-bottom: 10px;
        }

       .left-iframe {
            width: 100%;
            height: 100%;
            border: none;
            background: none transparent scroll repeat 0% 0%;
            visibility: inherit;
        }

        /* 切换按钮样式 */
       .toggle-sidebar {
            grid-column: 2 / 3;
            background-color: #337abb;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

       .navPoint img {
            width: 20px;
            height: 20px;
        }

        /* 右侧主要内容区域样式 */
       .right-content {
            grid-column: 3 / 4;
            background-color: #c4d8ed;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

       .right-content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            border-bottom: 1px solid #ccc;
        }

       .right-content-header span {
            color: #135294;
            margin-right: 10px;
        }

       .right-content-header a {
            color: #333;
            text-decoration: none;
            margin-left: 10px;
            transition: color 0.3s ease;
        }

       .right-content-header a:hover {
            color: #007bff;
        }

       .main-iframe {
            width: 100%;
            height: 100%;
            border: none;
            overflow-y: auto;
            z-index: 1;
        }

        /* 未登录提示样式 */
       .not-logged-in {
            width: 100%;
            height: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #c0c0c0;
            text-align: center;
        }
    </style>
    <script language="javascript" src="images/admin.js" type="text/javascript"></script>
    <script language="javascript" src="images/Admin(1).js"></script>
    <script>
        var status = 1;
        var Menus = new DvMenuCls;
        document.onclick = Menus.Clear;

        function switchSysBar() {
            if (1 == window.status) {
                window.status = 0;
                switchPoint.innerHTML = '<img src="images/left.gif">';
                document.getElementById("frmTitle").style.display = "none";
            } else {
                window.status = 1;
                switchPoint.innerHTML = '<img src="images/right.gif">';
                document.getElementById("frmTitle").style.display = "";
            }
        }
    </script>
</head>

<body>
    <!-- 导航部分 -->
    <c:if test="${!empty sessionScope.admin.username}">
        <div class="top-navbar">
            <div class="system-logo"></div>
            <ul class="main-menu">
                <li class="menu-item" onmouseover="Menus.Show(this, 0)" onclick="getleftbar(this);">
                    <a href="#">商品管理</a>
                    <div class="sub-menu">
                        <ul>
                            <li><a href="include/commodityClass/commodityClassAdd.jsp" target="frmright">新增商品种类</a></li>
                            <li><a href="CommodityClassAction!listCommodityClass.action" target="frmright">商品种类列表</a></li>
                            <li><a href="CommodityAction!adCommodity.action" target="frmright">商品录入</a></li>
                            <li><a href="CommodityAction!listCommodity.action" target="frmright">商品列表</a></li>
                        </ul>
                    </div>
                </li>
                <li class="menu-item" onmouseover="Menus.Show(this, 0)" onclick="getleftbar(this);">
                    <a href="#">订单管理</a>
                    <div class="sub-menu">
                        <ul>
                            <li><a href="OrderFormAction!listOrderForm.action" target="frmright">订单列表</a></li>
                        </ul>
                    </div>
                </li>
                <li class="menu-item" onmouseover="Menus.Show(this, 0)" onclick="getleftbar(this);">
                    <a href="#">用户管理</a>
                    <div class="sub-menu">
                        <ul>
                            <li><a href="UserAction!listUser.action" target="frmright">用户列表</a></li>
                            <li><a href="include/user/userQuery.jsp" target="frmright">用户查询</a></li>
                        </ul>
                    </div>
                </li>
                <li class="menu-item" onmouseover="Menus.Show(this, 0)" onclick="getleftbar(this);">
                    <a href="#">系统管理</a>
                    <div class="sub-menu">
                        <ul>
                            <li><a href="include/admin/amend.jsp" target="frmright">修改登录密码</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="main-content">
            <div class="left-sidebar" id="frmTitle">
                <div class="left-sidebar-title">常用快捷功能</div>
                <iframe class="left-iframe" id="frmleft" name="frmleft" src="left.htm" frameBorder="0" allowTransparency="true"></iframe>
            </div>
            <div class="toggle-sidebar" onclick="switchSysBar()">
                <span class="navPoint" id="switchPoint" title="关闭/打开左栏"><img src="images/right.gif"></span>
            </div>
            <div class="right-content">
                <div class="right-content-header">
                    <span>网上商城系统后台管理</span>
                    <span id="dvbbsannounce" style="font-weight: bold; color: #c00"></span>
                    <span>欢迎登陆：${sessionScope.admin.username} |
                        <a href="login.jsp">后台首页</a> | <a href="../index.jsp" target="_top">首页</a> | <a href="AdminAction!logout.action" onclick="return confirm('确定要退出吗?')" target="_top">退出 </a>
                    </span>
                </div>
                <iframe class="main-iframe" id="frmright" name="frmright" src="syscome.htm" frameBorder="0" scrolling="yes"></iframe>
            </div>
        </div>
    </c:if>
    <c:if test="${empty sessionScope.admin.username}">
        <div class="not-logged-in">
            <h3>对不起，还未登录，请登录</h3>
            <h3>
                正在跳转到登录页面，若没有跳转请<a href="login.jsp">点击这里！</a>
            </h3>
        </div>
        <%
            response.setHeader("refresh", "2;url=login.jsp");
        %>
    </c:if>
</body>

</html>